<template>
  <div class="admin">
    <el-collapse v-model="activeNames" class="custom-collapse">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="title search-title">精准查找</div>
        </template>
        <div class="search">
          <div class="first">
            <div class="input">
              <label>产品名称：</label>
              <el-input v-model.trim="params.search.product_name" clearable></el-input>
            </div>
            <div class="input">
              <label>上游渠道：</label>
              <el-select v-model="params.search.channel_id" placeholder="请选择" clearable>
                <el-option
                  v-for="item in getChannelList"
                  :key="item.id"
                  :label="item.channel_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="input">
            <label>状态查找：</label>
            <el-select v-model="params.product_status" placeholder="请选择" clearable>
              <el-option
                v-for="item in statusList"
                :key="item.status"
                :label="item.label"
                :value="item.status"
              ></el-option>
            </el-select>
          </div>
          <div class="btn">
            <el-button
              type="primary"
              @click="search()"
              v-if="searchInterface('merchant_applies.management')"
            >查找</el-button>
            <el-button @click="resetParams()">重置</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="content">
      <el-table ref="table" :data="prodoctList" style="width: 100%" border v-loading="loading">
        <el-table-column width="50" label="序号" key="1" header-align="center" align="center">
          <template slot-scope="scope">
            <div>{{params.per_limit*(params.page-1)+scope.$index+1}}</div>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          key="2"
          prop="channel_name"
          show-overflow-tooltip
          label="渠道名称"
          min-width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          key="3"
          prop="product_name"
          label="产品名称"
          show-overflow-tooltip
          min-width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          key="4"
          prop="product_desc"
          show-overflow-tooltip
          label="产品描述"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          key="5"
          prop="out_fee"
          label="对外费率"
          min-width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          key="6"
          prop="sign_fee"
          label="合作费率"
          min-width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          key="7"
          prop="holiday_fee"
          label="渠道节假日合作费率"
          min-width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          key="8"
          prop="enable_name"
          label="产品状态"
          show-overflow-tooltip
          min-width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          key="9"
          prop="created_at"
          label="创建时间"
          min-width="145"
        ></el-table-column>
        <el-table-column
          key="12"
          fixed="right"
          header-align="center"
          align="center"
          label="操作"
          width="210"
        >
          <template slot-scope="scope">
            <el-button v-if="searchInterface('products.enable')" @click="operation(scope.row)" type="text">{{scope.row.is_enable?'禁用':'开启'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="params.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.per_limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 微卡商户审核-商户审核
import { getProductList, operationProduct } from '@/api/product-admin/admin'
import { date, copy } from '@/utils'
import mixins from '@/mixins/channels'
export default {
  mixins: [mixins],
  data() {
    return {
      activeNames: ['1'],
      prodoctList: [],
      loading: false,
      total: 0,
      params: {
        page: 1,
        per_limit: 10,
        product_status: '',
        search: {
          product_name: '',
          channel_id: ''
        }
      },
      statusList: [
        {
          label: '正常',
          status: 1
        },
        {
          label: '禁用',
          status: 2
        }
      ]
    }
  },
  beforeMount() {
    this.getData()
  },
  methods: {
    // 查询
    search() {
      this.getData()
    },
    // 重置查找条件
    resetParams() {
      this.params = {
        page: 1,
        per_limit: 10,
        product_status: '',
        search: {
          product_name: '',
          channel_id: ''
        }
      }
      this.getData()
    },
    // 获取
    getData() {
      this.loading = true
      let params = copy.deepCopy(this.params)
      getProductList(params)
        .then(res => {
          const {
            data,
            meta: {
              pagination: { total }
            }
          } = res
          data.forEach(i => {
            i.created_at = date.formatDate(i.created_at)
          })
          this.prodoctList = data
          this.total = total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 操作 开启|| 禁用产品
    operation({ id, is_enable }) {
      this.$confirm(
        `确认执行${is_enable === 0 ? '开启' : '禁用'}操作吗?${
          is_enable === 1 ? '     禁用后的商户将不能收款' : ''
        }`,
        `${is_enable === 0 ? '开启' : '禁用'}操作？`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          const enable = is_enable === 0 ? 1 : 0
          operationProduct({
            id,
            params: { enable }
          }).then(() => {
            this.$message({
              type: 'success',
              message: is_enable === 0 ? '已开启' : '已禁用'
            })
            const prodoctList = this.prodoctList
            const item = prodoctList.find(i => i.id === id)
            item.is_enable = enable
            item.enable_name = is_enable === 0 ? '开启' : '禁用'
            this.prodoctList = prodoctList
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 切换页码
    currentChange(value) {
      this.params.page = value
      this.getData()
    },
    sizeChange(value) {
      this.params.per_limit = value
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.admin {
  width: 100%;
  height: 100%;
}
</style>